<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

  <head th:replace="include/head::head"></head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div th:replace="/include/sidebar"></div>

        <!-- top navigation -->
        <div th:replace="include/navigation::navigation"></div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">

            <div class="">
              <div class="col-md-12 col-sm-12  ">
                <div class="x_panel">

                  <div class="x_content">

                    <ul class="nav nav-tabs bar_tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">人工组卷</a>
                      </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <!-- Smart Wizard -->
                                <div id="wizard" class="form_wizard wizard_horizontal">
                                  <ul class="wizard_steps">
                                    <li>
                                      <a href="#step-1">
                                        <span class="step_no">1</span>
                                        <span class="step_descr">
                                              Step 1<br />
                                              <small>设置组卷参数</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-2">
                                        <span class="step_no">2</span>
                                        <span class="step_descr">
                                              Step 2<br />
                                              <small>添加选择题</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-3">
                                        <span class="step_no">3</span>
                                        <span class="step_descr">
                                              Step 3<br />
                                              <small>添加判断题</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-4">
                                        <span class="step_no">4</span>
                                        <span class="step_descr">
                                              Step 4<br />
                                              <small>添加填空题</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-5">
                                        <span class="step_no">5</span>
                                        <span class="step_descr">
                                              Step 5<br />
                                              <small>添加简答题</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-6">
                                        <span class="step_no">6</span>
                                        <span class="step_descr">
                                              Step 6<br />
                                              <small>添加应用题</small>
                                          </span>
                                      </a>
                                    </li>
                                    <li>
                                      <a href="#step-7">
                                        <span class="step_no">7</span>
                                        <span class="step_descr">
                                              Step 7<br />
                                              <small>下载试卷</small>
                                          </span>
                                      </a>
                                    </li>
                                  </ul>
                                  <div id="step-1">
                                    <table class="table table-bordered">
                                      <thead>
                                      <tr>
                                        <th>题目类型</th>
                                        <th>题目数量</th>
                                        <th>单题分数</th>
                                        <th>总分</th>
                                      </tr>
                                      </thead>
                                      <tbody>
                                      <tr>
                                        <th scope="row">选择题</th>
                                        <td><input id="choice-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="choice-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="choice-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">判断题</th>
                                        <td><input id="judge-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="judge-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="judge-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">填空题</th>
                                        <td><input id="filling-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="filling-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="filling-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">简答题</th>
                                        <td><input id="shortAnswer-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="shortAnswer-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="shortAnswer-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">应用题</th>
                                        <td><input id="solve-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="solve-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="solve-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">试卷名称</th>
                                        <td><input id="exam-name"placeholder="试卷名"></td>
                                        <th scope="row">试卷总分</th>
                                        <td id="total-score">0</td>
                                      </tr>
                                      </tbody>
                                    </table>
                                  </div>
                                  <div id="step-2">
                                    <div class="col-sm-12">
                                      <div class="card-box table-responsive">
                                        <div class="x_title">
                                          <h2>添加选择题 <small>已选0道</small></h2>
                                          <div class="clearfix"></div>
                                        </div>
                                        <table id="MyDatatable1" class="table table-striped table-bordered"
                                               style="width:100%">
                                          <thead>
                                          <tr>
                                            <th>试题编号</th>
                                            <th>试题正文</th>
                                            <th>试题答案</th>
                                            <th>试题解析</th>
                                            <th>操作</th>
                                          </tr>
                                          </thead>
                                          <tbody>
                                          <tr th:each="ques:${choice}" >
                                            <td th:text="${ques.quesId}"></td>
                                            <td th:text="${ques.quesContent}"></td>
                                            <td th:text="${ques.quesAnswer}"></td>
                                            <td th:text="${ques.quesDescribe}"></td>
                                            <td class="col-operate">
                                              <button type="button"
                                                      class="btn btn-modify btn-warning btn-sm addtopaper">加入试卷
                                              </button>
                                              <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                查看详情
                                              </button>
                                              <button type="button" class="btn btn-delete btn-secondary btn-sm removefrompaper" >
                                                移出试卷
                                              </button>
                                            </td>
                                          </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                  <div id="step-3">
                                    <div class="col-sm-12">
                                      <div class="card-box table-responsive">
                                        <h3>添加判断题</h3>
                                        <table id="MyDatatable2" class="table table-striped table-bordered"
                                               style="width:100%">
                                          <thead>
                                          <tr>
                                            <th>试题编号</th>
                                            <th>试题正文</th>
                                            <th>试题答案</th>
                                            <th>试题解析</th>
                                            <th>操作</th>
                                          </tr>
                                          </thead>

                                          <tbody>
                                          <tr th:each="ques:${judge}">
                                            <td th:text="${ques.quesId}"></td>
                                            <td th:text="${ques.quesContent}"></td>
                                            <td th:text="${ques.quesAnswer}"></td>
                                            <td th:text="${ques.quesDescribe}"></td>
                                            <td class="col-operate">
                                              <button type="button"
                                                      class="btn btn-modify btn-warning btn-sm addtopaper">加入试卷
                                              </button>
                                              <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                查看详情
                                              </button>
                                              <button type="button" class="btn btn-delete btn-secondary btn-sm removefrompaper" >
                                                移出试卷
                                              </button>
                                            </td>
                                          </tr>
                                          </tbody>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                  <div id="step-4">
                                    <div class="col-sm-12">
                                      <div class="card-box table-responsive">
                                        <h3>添加填空题</h3>
                                        <table id="MyDatatable3" class="table table-striped table-bordered"
                                               style="width:100%">
                                          <thead>
                                          <tr>
                                            <th>试题编号</th>
                                            <th>试题正文</th>
                                            <th>试题答案</th>
                                            <th>试题解析</th>
                                            <th>操作</th>
                                          </tr>
                                          </thead>

                                          <tbody>
                                          <tr th:each="ques:${filling}">
                                            <td th:text="${ques.quesId}"></td>
                                            <td th:text="${ques.quesContent}"></td>
                                            <td th:text="${ques.quesAnswer}"></td>
                                            <td th:text="${ques.quesDescribe}"></td>
                                            <td class="col-operate">
                                              <button type="button"
                                                      class="btn btn-modify btn-warning btn-sm addtopaper">加入试卷
                                              </button>
                                              <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                查看详情
                                              </button>
                                              <button type="button" class="btn btn-delete btn-secondary btn-sm removefrompaper" >
                                                移出试卷
                                              </button>
                                            </td>
                                          </tr>
                                          </tbody>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                  <div id="step-5">
                                    <div class="col-sm-12">
                                      <div class="card-box table-responsive">
                                        <h3>添加简答题</h3>
                                        <table id="MyDatatable4" class="table table-striped table-bordered"
                                               style="width:100%">
                                          <thead>
                                          <tr>
                                            <th>试题编号</th>
                                            <th>试题正文</th>
                                            <th>试题答案</th>
                                            <th>试题解析</th>
                                            <th>操作</th>
                                          </tr>
                                          </thead>

                                          <tbody>
                                          <tr th:each="ques:${shortAnwser}">
                                            <td th:text="${ques.quesId}"></td>
                                            <td th:text="${ques.quesContent}"></td>
                                            <td th:text="${ques.quesAnswer}"></td>
                                            <td th:text="${ques.quesDescribe}"></td>
                                            <td class="col-operate">
                                              <button type="button"
                                                      class="btn btn-modify btn-warning btn-sm addtopaper">加入试卷
                                              </button>
                                              <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                查看详情
                                              </button>
                                              <button type="button" class="btn btn-delete btn-secondary btn-sm removefrompaper" >
                                                移出试卷
                                              </button>
                                            </td>
                                          </tr>
                                          </tbody>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                  <div id="step-6">
                                    <div class="col-sm-12">
                                      <div class="card-box table-responsive">
                                        <h3>添加应用题</h3>
                                        <table id="MyDatatable5" class="table table-striped table-bordered"
                                               style="width:100%">
                                          <thead>
                                          <tr>
                                            <th>试题编号</th>
                                            <th>试题正文</th>
                                            <th>试题答案</th>
                                            <th>试题解析</th>
                                            <th>操作</th>
                                          </tr>
                                          </thead>

                                          <tbody>
                                          <tr th:each="ques:${solve}">
                                            <td th:text="${ques.quesId}"></td>
                                            <td th:text="${ques.quesContent}"></td>
                                            <td th:text="${ques.quesAnswer}"></td>
                                            <td th:text="${ques.quesDescribe}"></td>
                                            <td class="col-operate">
                                              <button type="button"
                                                      class="btn btn-modify btn-warning btn-sm addtopaper">加入试卷
                                              </button>
                                              <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                查看详情
                                              </button>
                                              <button type="button" class="btn btn-delete btn-secondary btn-sm removefrompaper" >
                                                移出试卷
                                              </button>
                                            </td>
                                          </tr>
                                          </tbody>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                  <div id="step-7">
                                    <label class="col-form-label col-md-4 col-sm-4 label-align" >
                                    </label>
                                    <h2 class="StepTitle">&nbsp&nbsp下载试卷及答案</h2>
                                    <form id="download" class="form-horizontal form-label-left">

                                      <div class="form-group row">
                                        <label class="col-form-label col-md-4 col-sm-4 label-align" >
                                        </label>
                                        <div class="col-md-2 col-sm-2 ">
                                          <input type="hidden" id="paperPath">
                                          <input id="download-paper" type="button"   class="form-control btn-bd-primary" th:value="点击下载试卷">
                                        </div>
                                      </div>

                                    </form>
                                  </div>
                                </div>
                                <!-- End SmartWizard Content -->
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <div th:replace="include/footer::footer"></div>
        <!-- /footer content -->
      </div>
    </div>

    <div th:replace="include/javascript::javascript"></div>
  <script th:inline="javascript">
    $(function () {
      $('#wizard').smartWizard();

      $('#wizard_verticle').smartWizard({
        transitionEffect: 'slide'
      });
      $('.buttonNext').addClass('btn btn-success');
      $('.buttonPrevious').addClass('btn btn-primary');
      $('.buttonFinish').hide();
      var data=new Array();
      var examname=null;
      var choice=null;
      var judge=null;
      var filling=null;
      var shortanswer=null;
      var solve=null;
      var button2=$('<a id="generatorpaper" class="btn btn-secondary" style="color: #fff">生成试卷</a>').on("click",function () {
        var examname=$("#exam-name").val();
        var choice=$("#choice-number").val();
        var judge=$("#judge-number").val();
        var filling=$("#filling-number").val();
        var shortanswer=$("#shortAnswer-number").val();
        var solve=$("#solve-number").val();
        var choiceScore=$("#choice-score").val();
        var judgeScore=$("#judge-score").val();
        var fillinfScore=$("#filling-score").val();
        var shortAnswerScore=$("#shortAnswer-score").val();
        var solveScore=$("#solve-score").val();
        data.push(solveScore);
        data.push(shortAnswerScore);
        data.push(fillinfScore);
        data.push(judgeScore);
        data.push(choiceScore);
        data.push(solve);
        data.push(shortanswer);
        data.push(filling);
        data.push(judge);
        data.push(choice);
        data.push(examname);
        $.ajax({
          type : "post",
          url : "/exam/manual-generator-request",
          contentType: "application/json;charset=UTF-8",
          data : JSON.stringify(data),
          dataType:"json",
          success : function(message){
            if (message.success){

              var paperPath=message.path;
              $("#paperPath").attr("value",paperPath);
              alert("试卷已生成"+paperPath);
            }
          }
        })
      });
      $('.actionBar').append(button2);
      $(".addtopaper").on("click",function () {
        var tr = $(this).parent().parent();
        tr.css("color","red");
        var quesId=tr.find("td").eq(0).text();
        data.push(quesId);
      });
      Array.prototype.indexOf=function(val){
        for (var i=0;i<this.length;i++){
          if (this[i]==val)
            return i;
        }
        return -1;
      }
      Array.prototype.remove=function(val){
        var index=this.indexOf(val);
        if(index>-1){
          this.splice(index,1);
        }
      }
      $(".removefrompaper").on("click",function () {
        var tr=$(this).parent().parent();
        tr.css("color","#212529")
        var quesId=tr.find("td").eq(0).text();
        data.remove(quesId);
      });
      $("#MyDatatable1").DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'bAutoWidth': false,
        'info': true,
        'autoWidth': false,
        'columnDefs': [
          {
            "targets": [0],
            className: "hide-column"
          },
          {
            "targets": [1,2,3],
            "Sorting": false,
            "render": function (data, type, row, meta) {
              // var order1 = meta.settings._iDisplayStart + meta.row + 1;
              // var order2 = order1 + '、';
              return type === 'display' && data.length > 20 ?
                      '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
            }
          },

        ]
      });
      $("#MyDatatable2").DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'bAutoWidth': false,
        'info': true,
        'autoWidth': false,
        'columnDefs': [
          {
            "targets": [0],
            className: "hide-column"
          },
          {
            "targets": [1,2,3],
            "Sorting": false,
            "render": function (data, type, row, meta) {
              // var order1 = meta.settings._iDisplayStart + meta.row + 1;
              // var order2 = order1 + '、';
              return type === 'display' && data.length > 20 ?
                      '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
            }
          },

        ]
      });
      $("#MyDatatable3").DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'bAutoWidth': false,
        'info': true,
        'autoWidth': false,
        'columnDefs': [
          {
            "targets": [0],
            className: "hide-column"
          },
          {
            "targets": [1,2,3],
            "Sorting": false,
            "render": function (data, type, row, meta) {
              // var order1 = meta.settings._iDisplayStart + meta.row + 1;
              // var order2 = order1 + '、';
              return type === 'display' && data.length > 20 ?
                      '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
            }
          },

        ]
      });
      $("#MyDatatable4").DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'bAutoWidth': false,
        'info': true,
        'autoWidth': false,
        'columnDefs': [
          {
            "targets": [0],
            className: "hide-column"
          },
          {
            "targets": [1,2,3],
            "Sorting": false,
            "render": function (data, type, row, meta) {
              // var order1 = meta.settings._iDisplayStart + meta.row + 1;
              // var order2 = order1 + '、';
              return type === 'display' && data.length > 20 ?
                      '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
            }
          },

        ]
      });
      $("#MyDatatable5").DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'bAutoWidth': false,
        'info': true,
        'autoWidth': false,
        'columnDefs': [
          {
            "targets": [0],
            className: "hide-column"
          },
          {
            "targets": [1,2,3],
            "Sorting": false,
            "render": function (data, type, row, meta) {
              // var order1 = meta.settings._iDisplayStart + meta.row + 1;
              // var order2 = order1 + '、';
              return type === 'display' && data.length > 20 ?
                      '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
            }
          },

        ]
      });
      $("#download-paper").on("click",function () {
        var paperPath=$("#paperPath").val();
        window.location.href="/exam/download_paper?path="+paperPath;
      });
      $(".paper-parameter").on("input propertychange",function () {
        var choiceNumber=$("#choice-number").val();
        var choiceScore=$("#choice-score").val();
        var choicePart=choiceScore*choiceNumber;
        var judgeNumber=$("#judge-number").val();
        var judgeScore=$("#judge-score").val();
        var judgePart=judgeScore*judgeNumber;
        var fillingNumber=$("#filling-number").val();
        var fillingScore=$("#filling-score").val();
        var fillingPart=fillingScore*fillingNumber;
        var shortAnswerNumber=$("#shortAnswer-number").val();
        var shortAnswerScore=$("#shortAnswer-score").val();
        var shortAnswerPart=shortAnswerNumber*shortAnswerScore;
        var solveNumber=$("#solve-number").val();
        var solveScore=$("#solve-score").val();
        var solvePart=solveScore*solveNumber;
        var totalScore=choicePart+judgePart+fillingPart+shortAnswerPart+solvePart;

        $("#choice-part").text(choicePart);
        $("#judge-part").text(judgePart);
        $("#filling-part").text(fillingPart);
        $("#shortAnswer-part").text(shortAnswerPart);
        $("#solve-part").text(solvePart);
        $("#total-score").text(totalScore);
      })

    })
  </script>
  </body>
</html>
